import React, { useState, useEffect } from 'react';
import { Row, Col, Input, Select, Button, Spin } from 'antd';
import styles from './index.less';
import * as apis from '@/services/SystemMgr';

const { Option } = Select;
const Edit = props => {
  const { rowData, orgId, params } = props;
  const [value, setValue] = useState({});
  const [healthy, setHealthy] = useState(true);
  const [remind, setRemind] = useState(true);
  const [warning, setWarning] = useState(true);
  useEffect(() => {
    apis
      .getMonitorConfigDetailUsingGET({
        params: {
          d1MonitorDetailId: rowData.d1MonitorDetailId,
          d2MonitorDetailId: rowData.d2MonitorDetailId,
          d3MonitorDetailId: rowData.d3MonitorDetailId,
          orgId,
        },
      })
      .then(result => {
        if (result && result.code === 1) {
          setValue(result.data);
        }
      });
  }, [orgId]);
  const changeValue = e => {
    const { id } = e.target;
    const obj = {
      ...value,
      [id]: e.target.value,
    };
    setValue(obj);
  };
  const changeSelect = (name, key) => {
    const obj = {
      ...value,
      [name]: key,
    };
    setValue(obj);
  };

  params(value);
  return (
    <Row className={styles.monitoringStandard} gutter={[0, 10]}>
      <Col>
        <Row type="flex" justify="space-between">
          <Col className="title">{rowData.targetName}</Col>
          <Col>单位 {rowData.unit}</Col>
        </Row>
      </Col>
      {Object.keys(value).length <= 0 ? (
        <Spin
          style={{
            margin: '200px 225px',
          }}
        />
      ) : (
        <>
          {/* 健康标准 --- Begin */}
          <Col>
            <Row type="flex" align="middle" gutter={[5, 0]}>
              <Col span={4}>健康标准:</Col>
              <Col>
                <Row type="flex" align="middle" gutter={[5, 0]}>
                  <Col style={{ width: '67px' }}>
                    <Input onChange={changeValue} id="d1MinValue1" value={value.d1MinValue1} />
                  </Col>
                  <Col>
                    <Select
                      value={value.d1Operator1}
                      onSelect={key => changeSelect('d1Operator1', key)}
                      style={{ width: '52px' }}
                    >
                      <Option value="1">无</Option>
                      <Option value="2">&lt;</Option>
                      <Option value="3">≤</Option>
                    </Select>
                  </Col>
                  <Col style={{ width: '30px' }}>指标</Col>
                  <Col>
                    <Select
                      value={value.d1Operator2}
                      onSelect={key => changeSelect('d1Operator2', key)}
                      style={{ width: '52px' }}
                    >
                      <Option value="1">无</Option>
                      <Option value="2">&lt;</Option>
                      <Option value="3">≤</Option>
                    </Select>
                  </Col>
                  <Col style={{ width: '67px' }}>
                    <Input onChange={changeValue} id="d1MaxValue1" value={value.d1MaxValue1} />
                  </Col>
                  <Col>
                    {value.d1ConditionType === '0' && healthy ? (
                      <Button type="primary" onClick={() => setHealthy(false)}>
                        添加条件
                      </Button>
                    ) : null}
                  </Col>
                </Row>
              </Col>
            </Row>
          </Col>
          {value.d1ConditionType !== '0' || !healthy ? (
            <Col>
              <Row type="flex" align="middle" gutter={[5, 0]}>
                <Col span={4}></Col>
                <Col>
                  <Select
                    value={value.d1ConditionType}
                    onSelect={key => changeSelect('d1ConditionType', key)}
                    style={{ width: '120px', marginRight: '155px' }}
                  >
                    <Option value="0">无</Option>
                    <Option value="1">或</Option>
                    <Option value="2">且</Option>
                  </Select>
                </Col>
                <Col>
                  <Button
                    className="red-button"
                    onClick={() => {
                      changeSelect('d1ConditionType', '0');
                      setHealthy(true);
                    }}
                  >
                    删除条件
                  </Button>
                </Col>
              </Row>
            </Col>
          ) : null}
          {value.d1ConditionType !== '0' || !healthy ? (
            <Col>
              <Row type="flex" align="middle" gutter={[5, 0]}>
                <Col span={4}></Col>
                <Col>
                  <Row type="flex" align="middle" gutter={[5, 0]}>
                    <Col style={{ width: '67px' }}>
                      <Input onChange={changeValue} id="d1MinValue2" value={value.d1MinValue2} />
                    </Col>
                    <Col>
                      <Select
                        value={value.d1Operator3}
                        onSelect={key => changeSelect('d1Operator3', key)}
                        style={{ width: '52px' }}
                      >
                        <Option value="1">无</Option>
                        <Option value="2">&lt;</Option>
                        <Option value="3">≤</Option>
                      </Select>
                    </Col>
                    <Col style={{ width: '30px' }}>指标</Col>
                    <Col>
                      <Select
                        value={value.d1Operator4}
                        onSelect={key => changeSelect('d1Operator4', key)}
                        style={{ width: '52px' }}
                      >
                        <Option value="1">无</Option>
                        <Option value="2">&lt;</Option>
                        <Option value="3">≤</Option>
                      </Select>
                    </Col>
                    <Col style={{ width: '67px' }}>
                      <Input onChange={changeValue} id="d1MaxValue2" value={value.d1MaxValue2} />
                    </Col>
                  </Row>
                </Col>
              </Row>
            </Col>
          ) : null}
          {/* 健康标准 --- End */}
          {/* 提醒标准 --- Begin */}
          <Col>
            <Row type="flex" align="middle" gutter={[5, 0]}>
              <Col span={4}>提醒标准:</Col>
              <Col>
                <Row type="flex" align="middle" gutter={[5, 0]}>
                  <Col style={{ width: '67px' }}>
                    <Input onChange={changeValue} id="d2MinValue1" value={value.d2MinValue1} />
                  </Col>
                  <Col>
                    <Select
                      value={value.d2Operator1}
                      onSelect={key => changeSelect('d2Operator1', key)}
                      style={{ width: '52px' }}
                    >
                      <Option value="1">无</Option>
                      <Option value="2">&lt;</Option>
                      <Option value="3">≤</Option>
                    </Select>
                  </Col>
                  <Col style={{ width: '30px' }}>指标</Col>
                  <Col>
                    <Select
                      value={value.d2Operator2}
                      onSelect={key => changeSelect('d2Operator2', key)}
                      style={{ width: '52px' }}
                    >
                      <Option value="1">无</Option>
                      <Option value="2">&lt;</Option>
                      <Option value="3">≤</Option>
                    </Select>
                  </Col>
                  <Col style={{ width: '67px' }}>
                    <Input onChange={changeValue} id="d2MaxValue1" value={value.d2MaxValue1} />
                  </Col>
                  <Col>
                    {value.d2ConditionType === '0' && remind ? (
                      <Button type="primary" onClick={() => setRemind(false)}>
                        添加条件
                      </Button>
                    ) : null}
                  </Col>
                </Row>
              </Col>
            </Row>
          </Col>
          {value.d2ConditionType !== '0' || !remind ? (
            <Col>
              <Row type="flex" align="middle" gutter={[5, 0]}>
                <Col span={4}></Col>
                <Col>
                  <Select
                    value={value.d2ConditionType}
                    onSelect={key => changeSelect('d2ConditionType', key)}
                    style={{ width: '120px', marginRight: '155px' }}
                  >
                    <Option value="0">无</Option>
                    <Option value="1">或</Option>
                    <Option value="2">且</Option>
                  </Select>
                </Col>
                <Col>
                  <Button
                    className="red-button"
                    onClick={() => {
                      changeSelect('d2ConditionType', '0');
                      setRemind(true);
                    }}
                  >
                    删除条件
                  </Button>
                </Col>
              </Row>
            </Col>
          ) : null}
          {value.d2ConditionType !== '0' || !remind ? (
            <Col>
              <Row type="flex" align="middle" gutter={[5, 0]}>
                <Col span={4}></Col>
                <Col>
                  <Row type="flex" align="middle" gutter={[5, 0]}>
                    <Col style={{ width: '67px' }}>
                      <Input onChange={changeValue} id="d2MinValue2" value={value.d2MinValue2} />
                    </Col>
                    <Col style={{ width: '57px' }}>
                      <Select
                        value={value.d2Operator3}
                        onSelect={key => changeSelect('d2Operator3', key)}
                      >
                        <Option value="1">无</Option>
                        <Option value="2">&lt;</Option>
                        <Option value="3">≤</Option>
                      </Select>
                    </Col>
                    <Col style={{ width: '30px' }}>指标</Col>
                    <Col style={{ width: '57px' }}>
                      <Select
                        value={value.d2Operator4}
                        onSelect={key => changeSelect('d2Operator4', key)}
                      >
                        <Option value="1">无</Option>
                        <Option value="2">&lt;</Option>
                        <Option value="3">≤</Option>
                      </Select>
                    </Col>
                    <Col style={{ width: '67px' }}>
                      <Input onChange={changeValue} id="d2MaxValue2" value={value.d2MaxValue2} />
                    </Col>
                  </Row>
                </Col>
              </Row>
            </Col>
          ) : null}
          {/* 提醒标准 --- End */}
          {/* 预警标准 --- Begin */}
          <Col>
            <Row type="flex" align="middle" gutter={[5, 0]}>
              <Col span={4}>预警标准:</Col>
              <Col>
                <Row type="flex" align="middle" gutter={[5, 0]}>
                  <Col style={{ width: '67px' }}>
                    <Input onChange={changeValue} id="d3MinValue1" value={value.d3MinValue1} />
                  </Col>
                  <Col>
                    <Select
                      value={value.d3Operator1}
                      onSelect={key => changeSelect('d3Operator1', key)}
                      style={{ width: '52px' }}
                    >
                      <Option value="1">无</Option>
                      <Option value="2">&lt;</Option>
                      <Option value="3">≤</Option>
                    </Select>
                  </Col>
                  <Col style={{ width: '30px' }}>指标</Col>
                  <Col>
                    <Select
                      value={value.d3Operator2}
                      onSelect={key => changeSelect('d3Operator2', key)}
                      style={{ width: '52px' }}
                    >
                      <Option value="1">无</Option>
                      <Option value="2">&lt;</Option>
                      <Option value="3">≤</Option>
                    </Select>
                  </Col>
                  <Col style={{ width: '67px' }}>
                    <Input onChange={changeValue} id="d3MaxValue1" value={value.d3MaxValue1} />
                  </Col>
                  <Col>
                    {value.d3ConditionType === '0' && warning ? (
                      <Button type="primary" onClick={() => setWarning(false)}>
                        添加条件
                      </Button>
                    ) : null}
                  </Col>
                </Row>
              </Col>
            </Row>
          </Col>
          {value.d3ConditionType !== '0' || !warning ? (
            <Col>
              <Row type="flex" align="middle" gutter={[5, 0]}>
                <Col span={4}></Col>
                <Col>
                  <Select
                    value={value.d3ConditionType}
                    onSelect={key => changeSelect('d3ConditionType', key)}
                    style={{ width: '120px', marginRight: '155px' }}
                  >
                    <Option value="0">无</Option>
                    <Option value="1">或</Option>
                    <Option value="2">且</Option>
                  </Select>
                </Col>
                <Col>
                  <Button
                    className="red-button"
                    onClick={() => {
                      changeSelect('d3ConditionType', '0');
                      setWarning(true);
                    }}
                  >
                    删除条件
                  </Button>
                </Col>
              </Row>
            </Col>
          ) : null}
          {value.d3ConditionType !== '0' || !warning ? (
            <Col>
              <Row type="flex" align="middle" gutter={[5, 0]}>
                <Col span={4}></Col>
                <Col>
                  <Row type="flex" align="middle" gutter={[5, 0]}>
                    <Col style={{ width: '67px' }}>
                      <Input onChange={changeValue} id="d3MinValue2" value={value.d3MinValue2} />
                    </Col>
                    <Col>
                      <Select
                        value={value.d3Operator3}
                        onSelect={key => changeSelect('d3Operator3', key)}
                        style={{ width: '52px' }}
                      >
                        <Option value="1">无</Option>
                        <Option value="2">&lt;</Option>
                        <Option value="3">≤</Option>
                      </Select>
                    </Col>
                    <Col style={{ width: '30px' }}>指标</Col>
                    <Col>
                      <Select
                        value={value.d3Operator4}
                        onSelect={key => changeSelect('d3Operator4', key)}
                        style={{ width: '52px' }}
                      >
                        <Option value="1">无</Option>
                        <Option value="2">&lt;</Option>
                        <Option value="3">≤</Option>
                      </Select>
                    </Col>
                    <Col style={{ width: '67px' }}>
                      <Input onChange={changeValue} id="d3MaxValue2" value={value.d3MaxValue2} />
                    </Col>
                  </Row>
                </Col>
              </Row>
            </Col>
          ) : null}
          {/* 预警标准 --- End */}
        </>
      )}
    </Row>
  );
};

export default Edit;
